<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerX="true"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

</head>
<body>
  <div class="page_content">
  <div id="maingrid"></div>
  </div>
<script type="text/javascript">
     var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[{
            "col1":"佳佳乐",
            "rows":[{
                "col2": "饮料",
                "rows":[{
                    "col3": "苹果汁",
                    "col4":"每箱24瓶",
                    "col5":"0.00",
                    "col6":"18.00"
                    },
                    {
                    "col3": "牛奶",
                    "col4":"每箱24瓶",
                    "col5":"40.00",
                    "col6":"18.5"
                    },
                    {
                    "col3": {value:"<span class='red'>小计<span>", cols:2},
                    "col5":"40.00",
                    "col6":"19.00"
                    }]
                },
                {
                "col2": "调味品",
                "rows":[{
                    "col3": "蕃茄酱",
                    "col4":"每箱12瓶",
                    "col5":"70.00",
                    "col6":"10.00"
                    },
                    {
                    "col3": {value:"<span class='red'>小计<span>", cols:2},
                    "col5":"40.00",
                    "col6":"19.00"
                    }]
                },
                {
                "col2": {value:"<div style='width:100%;height:100%;background-color:#f2f2f2;'>产品首次订购总金额</div>", cols:3},
                "col5": {value:"<div style='width:100%;height:100%;background-color:#f2f2f2;'>2460</div>", cols:2}
                }]
            },{
            "col1":"康富食品",
            "rows":[{
                "col2": "调味品",
                "rows":[{
                    "col3": "盐",
                    "col4":"每箱12瓶",
                    "col5":"0.00",
                    "col6":"22.00"
                    },
                    {
                    "col3": "麻油",
                    "col4":"每箱12瓶",
                    "col5":"0.00",
                    "col6":"21.35"
                    },
                    {
                    "col3": "海苔酱",
                    "col4":"每箱24瓶",
                    "col5":"0.00",
                    "col6":"21.05"
                    },
                    {
                    "col3": "肉松",
                    "col4":"每箱24瓶",
                    "col5":"100.00",
                    "col6":"17.00"
                    },
                    {
                    "col3": {value:"<span class='red'>小计<span>", cols:2},
                    "col5":"100.00",
                    "col6":"20.35"
                    }]
                },
                {
                "col2": {value:"<div style='width:100%;height:100%;background-color:#f2f2f2;'>产品首次订购总金额</div>", cols:3},
                "col5": {value:"<div style='width:100%;height:100%;background-color:#f2f2f2;'>1700</div>", cols:2}
                }]
            }]
        }
       

       //数据表格
    var g;
        
  $(function(){
        g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '供应商', name: 'col1',width: 150},
                  { display: '产品类别', name: 'col2', width: 150 },
                  { display: '产品名称', name: 'col3', width: 150 },
                  { display: '单位数量', name: 'col4', width: 150 },
                  { display: '订购量', name: 'col5', width: 150 },
                  { display: '单价', name: 'col6', width: 150 }
                 
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',rownumbers:false,checkbox:false,
                height: 'auto', width:905,multihead:true,multiBody:true,usePager:false,hideScrollerX:true
            });
      })
          
    </script>   
</body>
</html>